add catalog #4915

mmromanova · 2024-12-10T18:46:53Z

mateacademy-ai-mentor

Thank you for your hard work on this project! 😊 While you've made great progress, there are a few critical issues that need to be addressed before we can approve the pull request. Specifically, there are several SCSS variables used across your stylesheets that are not defined, which can lead to compilation errors and affect the functionality of your styles. Additionally, the card width does not meet the specified requirement, and the data-qa attribute is applied incorrectly. Please address these issues to ensure your code meets the task requirements. Keep up the great work, and I'm confident you'll have this sorted in no time! 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.

mateacademy-ai-mentor · 2024-12-10T18:49:23Z

src/index.html

+      </div>
+      <button class="to-buy" data-qa="card-hover"> BUY </button>
+    </section>
+
+    <section class="product">
+      <div class="card" data-qa="card">
+        <div class="card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+        <div class="card__product-code">
+          Product code: 195434
+        </div>
+      </div>
+      <div class="rate">
+        <div class="rate--stars rate--stars-4">
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+        </div>
+        <div class="rate--reviews">
+          Reviews: 5
+        </div>
+      </div>
+      <div class="price">
+        <div class="price--label">
+          Price:
+        </div>
+        <div class="price--value">
+          $2,199
+        </div>
+      </div>
+      <button class="to-buy" data-qa="card-hover"> BUY </button>
+    </section>
+
+
+    <section class="product">
+      <div class="card" data-qa="card">
+        <div class="card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+        <div class="card__product-code">
+          Product code: 195434
+        </div>
+      </div>
+      <div class="rate">
+        <div class="rate--stars rate--stars-4">
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+        </div>
+        <div class="rate--reviews">
+          Reviews: 5
+        </div>
+      </div>
+      <div class="price">
+        <div class="price--label">
+          Price:
+        </div>
+        <div class="price--value">
+          $2,199
+        </div>
+      </div>
+      <button class="to-buy" data-qa="card-hover"> BUY </button>
+    </section>
+
+    <section class="product">
+      <div class="card" data-qa="card">
+        <div class="card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+        <div class="card__product-code">
+          Product code: 195434
+        </div>
+      </div>
+      <div class="rate">
+        <div class="rate--stars rate--stars-4">
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+          <div class="rate--stars__star"></div>
+        </div>
+        <div class="rate--reviews">
+          Reviews: 5
+        </div>
+      </div>
+      <div class="price">
+        <div class="price--label">
+          Price:
+        </div>
+        <div class="price--value">
+          $2,199
+        </div>
+      </div>
+      <button class="to-buy" data-qa="card-hover"> BUY </button>
+    </section>


The product sections are repeated with identical content. Consider using a template system or JavaScript to dynamically generate this content to avoid redundancy and make maintenance easier.

mateacademy-ai-mentor · 2024-12-10T18:49:23Z

src/styles/base.scss

+  padding-top: 50px;
+  padding-inline: 40px;
+  display: grid;
+  grid-template-columns: repeat(var(--column-count), $card-width);


The variable $card-width is used here, but it is not defined in this file. Ensure that $card-width is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor · 2024-12-10T18:49:23Z

src/styles/base.scss

+.product {
+  margin-top: 1px;
+  margin-left: 1px;
+  width: $card-width;


The variable $card-width is used here, but it is not defined in this file. Ensure that $card-width is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor · 2024-12-10T18:49:23Z

src/styles/base.scss

+  margin-top: 1px;
+  margin-left: 1px;
+  width: $card-width;
+  height: $card-height;


The variable $card-height is used here, but it is not defined in this file. Ensure that $card-height is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor · 2024-12-10T18:49:23Z

src/styles/base.scss

+  margin-left: 1px;
+  width: $card-width;
+  height: $card-height;
+  border: 1px solid $white_color;


The variable $white_color is used here, but it is not defined in this file. Ensure that $white_color is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor · 2024-12-10T18:49:25Z

src/styles/price.scss

+  display: flex;
+  justify-content: space-between;
+  margin-top: 24px;
+  padding-left: $padding-left;


The variable $padding-left is used here, but it is not defined in this file. Ensure that $padding-left is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor · 2024-12-10T18:49:25Z

src/styles/price.scss

+  padding-left: $padding-left;
+
+  &--label {
+    color: $text-color;


The variable $text-color is used here, but it is not defined in this file. Ensure that $text-color is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor · 2024-12-10T18:49:25Z

src/styles/price.scss

+  }
+
+  &--value {
+    color: $text-color-strong;


The variable $text-color-strong is used here, but it is not defined in this file. Ensure that $text-color-strong is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor · 2024-12-10T18:49:25Z

src/styles/stars.scss

@@ -0,0 +1,30 @@
+.rate {
+  padding-left: $padding-left;


The variable $padding-left is used here, but it is not defined in this file. Ensure that $padding-left is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor · 2024-12-10T18:49:25Z

src/styles/stars.scss

+  }
+
+  &--reviews {
+    color: $text-color-strong;


The variable $text-color-strong is used here, but it is not defined in this file. Ensure that $text-color-strong is defined somewhere in your SCSS files before it is used.

mateacademy-ai-mentor

Great job on addressing many of the issues in your code! 🎉 While there are still a few areas that need attention, such as ensuring the data-qa attributes are applied consistently and correcting the card width to 200px, your progress is commendable. Additionally, make sure all SCSS variables are defined to avoid compilation errors.

Remember, these improvements are crucial for the functionality and maintainability of your code. Keep up the good work, and continue learning from these experiences to enhance your coding skills! 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

mateacademy-ai-mentor · 2024-12-10T19:23:10Z

src/index.html

+              <a
+                href="#laptops"
+                class="menu-item"
+                data-qa="nav-hover"


The data-qa attribute is applied to the 'Laptops & Computers' menu item. Ensure that this attribute is applied consistently across all menu items if required by the task.

mateacademy-ai-mentor · 2024-12-10T19:23:10Z

src/index.html

+    </header>
+
+    <main class="main">
+    <section class="product" data-qa="card">


The data-qa attribute is applied to the section with class product. Ensure that this attribute is applied consistently across all product sections if required by the task.

mateacademy-ai-mentor · 2024-12-10T19:23:10Z

src/index.html

+
+
+    <section class="product">
+      <div class="card" data-qa="card">


The data-qa attribute is applied to the card div. Ensure that this attribute is applied consistently across all card divs if required by the task.

mateacademy-ai-mentor · 2024-12-10T19:23:10Z

src/styles/base.scss

+
+
+.main {
+  padding-top: $main-padding-top;


The variable $main-padding-top is used but not defined. Please define this variable to avoid compilation errors.

mateacademy-ai-mentor · 2024-12-10T19:23:10Z

src/styles/base.scss

+
+.main {
+  padding-top: $main-padding-top;
+  padding-inline: $main-padding-inline;


The variable $main-padding-inline is used but not defined. Please define this variable to avoid compilation errors.

mateacademy-ai-mentor · 2024-12-10T19:23:12Z

src/styles/price.scss

+  display: flex;
+  justify-content: space-between;
+  margin-top: 24px;
+  padding-left: $padding-left;


The variable $padding-left is used but not defined. Please define this variable to avoid compilation errors.

mateacademy-ai-mentor · 2024-12-10T19:23:12Z

src/styles/price.scss

+  padding-left: $padding-left;
+
+  &--label {
+    color: $text-color;


The variable $text-color is used but not defined. Please define this variable to avoid compilation errors.

mateacademy-ai-mentor · 2024-12-10T19:23:12Z

src/styles/price.scss

+  }
+
+  &--value {
+    color: $text-color-strong;


The variable $text-color-strong is used but not defined. Please define this variable to avoid compilation errors.

mateacademy-ai-mentor · 2024-12-10T19:23:12Z

src/styles/stars.scss

@@ -0,0 +1,30 @@
+.rate {
+  padding-left: $padding-left;


The variable $padding-left is used but not defined. Please define this variable to avoid compilation errors.

mateacademy-ai-mentor · 2024-12-10T19:23:12Z

src/styles/stars.scss

+  }
+
+  &--reviews {
+    color: $text-color-strong;


The variable $text-color-strong is used but not defined. Please define this variable to avoid compilation errors.

add catalog

e85f593

mateacademy-ai-mentor suggested changes Dec 10, 2024

View reviewed changes

add catalog2

51b1469

mmromanova requested a review from mateacademy-ai-mentor December 10, 2024 19:21

mateacademy-ai-mentor approved these changes Dec 10, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add catalog #4915

add catalog #4915

mmromanova commented Dec 10, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

mateacademy-ai-mentor Dec 10, 2024

add catalog #4915

Are you sure you want to change the base?

add catalog #4915

Conversation

mmromanova commented Dec 10, 2024

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment